<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>myVue</title>
</head>
<body>
<div id="app">
	<div id="content"></div>
	<div id="reverse"></div>
	<input id="texts" type="text" value="">
</div>
<script src="/dist/umd/vue.js"></script>
<script>
   let {reactive, shallowReactive, readonly, effect, ref, shallowRef, toRefs} = Vue;

   let proxy = reactive({name: '小明', age: 10, addr: [1, 2, 3]});
   let {name, age, addr} = toRefs(proxy)
   let count = ref(110)
   let readonlyState = readonly({name: '只读'})
   console.log('proxy', proxy)
   console.log('count', count)

   effect(() => {
      app.innerHTML = name.value + ',' + age.value + ',' + addr.value
   })

   setTimeout(() => {
      // reactive
      proxy.name = '校长';
      proxy.age = 100;
      proxy.addr[2] = 10;
      // ref
      count = 1111;
      // readonly
      readonlyState.name = 'xxxx'

      console.log('proxy', proxy)
      console.log('count', count)
   }, 1000)


   function extend() {
      var extended = {};
      var deep = false;
      var i = 0;

		// 判断是否为深拷贝
      if (Object.prototype.toString.call(arguments[0]) === '[object Boolean]') {
         deep = arguments[0];
         i++;//如果为深拷贝则初始的i为1或者为0
      }

		// 将对象属性合并到已存在的对象中
      var merge = function (obj) {
         for (var prop in obj) {
            if (obj.hasOwnProperty(prop)) {
		// 如果属性为对象并且需要深拷贝时则使用函数递归、反之则将当前的属性替换现有的属性
               if (deep && Object.prototype.toString.call(obj[prop]) === '[object Object]') {
                  extended[prop] = extend(extended[prop], obj[prop]);
               } else {
                  extended[prop] = obj[prop];
               }
            }
         }
      };

		// 遍历所有对象属性
      for (; i < arguments.length; i++) {
         merge(arguments[i]);
      }

      return extended;
   }

   console.log(extend(true,{a:1,b:2,c:3},{a:2,d:5,b:{a:123}}))

</script>
</body>
</html>